<template>
  <div>
    <div class="item">
      <div class="header">
        <span>描述</span>
      </div>
      <div class="content">
        <a-input
          v-model:value="props.nodeData.properties.remarks"
          :rows="3"
          placeholder="请输入描述"
          style="width: 100%"
          @change="setProperties()"
        />
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>输入变量</span>
      </div>
      <div class="content">
        <div class="var-item">
          <div class="field">
            <a-select style="width: 100%" v-model:value="inputParamId" placeholder="请选择输入字段" @change="handleFieldChange">
              <a-select-option v-for="preItem in prevVariables" :key="preItem.id" :value="preItem.id">
                {{ preItem.nodeName }}/{{ preItem.name }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>数据库配置</span>
      </div>
      <div class="content">
        <a-form :label-col="labelCol">
          <a-form-item label="类型" style="margin-bottom: 8px">
            <a-select v-model:value="props.nodeData.properties.options.dbType" placeholder="请选择数据库类型" style="width: 100%">
              <a-select-option value="mysql">MySQL</a-select-option>
              <a-select-option value="postgresql">PostgreSQL</a-select-option>
              <a-select-option value="oracle">Oracle</a-select-option>
              <a-select-option value="sqlserver">SQL Server</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="主机" style="margin-bottom: 8px">
            <a-input v-model:value="props.nodeData.properties.options.dbHost" placeholder="请输入数据库主机" style="width: 100%" />
          </a-form-item>
          <a-form-item label="端口" style="margin-bottom: 8px">
            <a-input v-model:value="props.nodeData.properties.options.dbPort" placeholder="请输入数据库端口" style="width: 100%" />
          </a-form-item>
          <a-form-item label="名称" style="margin-bottom: 8px">
            <a-input v-model:value="props.nodeData.properties.options.dbName" placeholder="请输入数据库名称" style="width: 100%" />
          </a-form-item>
          <a-form-item label="用户名" style="margin-bottom: 8px">
            <a-input v-model:value="props.nodeData.properties.options.dbUserName" placeholder="请输入用户名" style="width: 100%" />
          </a-form-item>
          <a-form-item label="密码" style="margin-bottom: 8px">
            <a-input-password v-model:value="props.nodeData.properties.options.dbPassWord"    :visibility-toggle="false" placeholder="请输入密码" style="width: 100%" />
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>输出变量</span>
      </div>
      <div class="content">
        <div style="display: flex; flex-direction: column">
          <span v-for="item in props.nodeData.properties.outputParams" class="ai-label">
            {{ item.field }}&#60;{{ item.type }}&#62;{{ item.name }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch, computed } from 'vue';
import { getPreNodes } from '../../../../utils/flowNodeUtils';

const props = defineProps({
  nodeData: Object,
  lf: Object || String
});
const labelCol = { style: { width: '60px' } };
const prevNodes = ref([]);
const prevVariables = computed(() => {
  if (prevNodes.value.length === 0) return [];

  return prevNodes.value.flatMap(prevNode => {
    // 开始节点使用inputParams，其他节点使用outputParams
    const params = prevNode.type === 'start' ? prevNode.properties.inputParams : prevNode.properties.outputParams;

    var dd =
      Array.isArray(params) && params.length > 0
        ? params.map(param => ({
            nodeId: prevNode.id,
            nodeName: prevNode.properties.text,
            field: param.field,
            name: param.name,
            type: param.type,
            id: prevNode.id + '_' + param.field
          }))
        : [];
    console.log(dd);
    return dd;
  });
});
const inputParamId = computed({
  get() {
    return props.nodeData.properties.inputParams && props.nodeData.properties.inputParams.length > 0
      ? props.nodeData.properties.inputParams[0].id
      : null;
  },
  set(val) {
    if (props.nodeData.properties.inputParams.length == 0) {
      props.nodeData.properties.inputParams.push({ id: '' });
    }
    props.nodeData.properties.inputParams[0].id = val;
    props.nodeData.properties.inputParams[0].name = prevVariables.value.find(item => item.id === val)?.name || '';
  }
});
watch(
  () => props.nodeData,
  nodeDataChange => {
    console.log('nodeDataChange');
    var nodes = getPreNodes(props.nodeData, props.lf.graphModel);
    prevNodes.value = nodes;

    console.log(nodes);
  },
  {
    immediate: true
  }
);

const handleFieldChange = value => {
  setProperties();
};


const setProperties = () => {
  props.nodeData.properties.inputParams.forEach(item => {
    // if (item.nodeId) {
    //   item.id = item.nodeId + '_' + item.field;
    // }
    if (item.id) {
      var items = item.id.split('_');
      item.field = items[1];
      item.nodeId = items[0];
    }
  });
  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};
watch(
  () => props.nodeData.properties,
  dataChange => {
    setProperties();
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang='less' scoped>
.item {
  padding-top: 4px;
  padding-bottom: 4px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 2px;
  }
  .content {
    background-color: #fff;
  }
}

.case-item {
  margin-bottom: 8px;
  position: relative;
}

.case-item .case-header {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 11px;
  height: 30px;
  border-radius: 3px 0 0;
  background-color: #fff;
  z-index: 2;
  pointer-events: none;
  padding: 2px 11px;
  display: flex;
  justify-content: space-between;
}

.case-item .case-header .case-label {
  color: #999;
}

.case-item .case-header .case-action .app-iconify {
  cursor: pointer;
  pointer-events: auto;
}

.case-item .case-header .case-action .delete {
  transition: color 0.15s;
}

.case-item .case-header .case-action .delete:hover {
  color: #ff4d4f;
}

.case-item .case-input {
  padding-top: 32px;
}
.ai-label {
  color: rgb(170, 170, 170);
  font-size: 14px;
}

.var-item {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
}

.var-item > div {
  margin-right: 10px;
}

.var-item > div:last-child {
  margin-right: 0;
}

.var-item > div.name,
.var-item > div.field {
  flex: 1;
}

.var-item > div.name .ant-input-disabled {
  color: #333 !important;
  cursor: default !important;
}

.var-item > div.action {
  margin-right: 0;
  text-align: center;
  width: 32px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}

.var-item > div.action:hover {
  background-color: #f5f5f5;
}

.var-item > div > p {
  color: #e00;
  margin-top: 2px;
  margin-bottom: 0;
}
</style>